<template>
  <view class="product-detail-wrap u-skeleton" :data-theme="globPrimary">
    <u-navbar
      class="navbar-wrapper"
      :class="{ active: opacity < 1 }"
      :is-back="false"
      :border-bottom="false"
      back-icon-color="#fff"
      :immersive="true"
      :background="backgroundColor"
    >
      <view class="round" @tap="onBack"
        ><u-icon name="nav-back" color="#fff" size="30"></u-icon
      ></view>
      <view v-show="opacity >= 1" class="navbar-title u-line-1">商品详情</view>
      <!-- <view slot="right" class="right">
                <view class="round"
                    ><u-icon name="zhuanfa" color="#fff" size="30"></u-icon
                ></view>
            </view> -->
    </u-navbar>
    <view class="status-bar-placeholder" :style="{ height: globStatusBarHeight + 'px' }"></view>
    <edu-image :height="750" v-if="loading"></edu-image>
    <u-swiper
      :list="detailsInfo.swiper"
      name="fileurl"
      :height="750"
      :autoplay="false"
      mode="number"
      indicator-pos="bottomRight"
      v-else
    ></u-swiper>

    <view class="product-name">
      <div class="name u-line-2 u-skeleton-rect">
        {{ detailsInfo.title }}
      </div>
    </view>

    <view class="product-price">
      <view class="price-wrap u-skeleton-rect">
        <view class="stock">月兑换{{ detailsInfo.month_count || 0 }}</view>
        <view class="line"></view>
        <view class="stock">库存{{ detailsInfo.stock_num }}</view>
        <view class="right">
          <block v-if="detailsInfo.credit_price > 0 && detailsInfo.cash_price > 0">
            <view class="integral">{{ detailsInfo.credit_price }}</view>
            <view class="discount">积分+{{ projectSetting.appMoneySymbol }}</view>
            <view class="price">{{ detailsInfo.cash_price }}</view>
          </block>
          <block v-else-if="detailsInfo.credit_price > 0">
            <view class="integral">{{ detailsInfo.credit_price }}</view>
            <view class="discount">积分</view>
          </block>
          <block v-else-if="detailsInfo.cash_price > 0">
            <view class="discount">{{ projectSetting.appMoneySymbol }}</view>
            <view class="price">{{ detailsInfo.cash_price }}</view>
          </block>
          <view class="free" v-else>免费</view>
          <view class="market-price" v-if="detailsInfo.scribing_price > 0">{{
            detailsInfo.scribing_price | formatCurrency
          }}</view>
        </view>
      </view>
    </view>

    <view class="product-graphic">
      <view class="title u-flex u-border-bottom"><text class="line"></text>商品详情</view>
      <view class="content">
        <u-parse :html="detailsInfo.info"></u-parse>
      </view>
    </view>

    <view class="product-cart">
      <view class="cart-placeholder safe-area-inset-bottom"></view>
      <view class="cart-wrap" v-if="!loading">
        <button class="btn u-line-1 u-fix-ios-appearance" @click="onPay">立即兑换</button>
      </view>
    </view>

    <u-skeleton :loading="loading" el-color="#F7F7F7" bg-color="transparent"></u-skeleton>

    <edu-user-coupon></edu-user-coupon>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import projectSetting from '@/settings/projectSetting.js'
export default {
  data() {
    return {
      projectSetting,
      backgroundColor: { backgroundColor: 'transparent' },
      opacity: 0,
      loading: true,
      list: [
        {
          image_url: '',
        },
        {
          image_url: '',
        },
        {
          image_url: '',
        },
        {
          image_url: '',
        },
      ],
      detailsInfo: {
        title: '商品标题',
        cash_price: 0,
        credit_price: 0,
        id: 1,
        info: '',
        month_count: 0,
        scribing_price: 0,
        stock_num: 0,
        swiper: [],
      },
    }
  },
  // 监听页面返回
  onBackPress(options) {
    if (options.from === 'navigateBack') {
      return false
    }
    this.onBack()
    return true
  },
  onPageScroll(e) {
    this.pageScroll(e)
  },
  onLoad(options) {
    this.getDetailsInfo(options.id)
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globWindowHeight: 'projectSetting/globWindowHeight',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
    }),
  },
  methods: {
    getDetailsInfo(id) {
      this.loading = true
      this.$edu.api.getMallProductDetails(id).then((res) => {
        const { data } = res
        this.detailsInfo = data
        setTimeout(() => {
          this.loading = false
        }, 50)
      })
    },
    onPay() {
      this.$edu.judgeLogin(() => {
        this.$u.route('pageFound/mall/pay', {
          id: this.detailsInfo.id,
        })
      })
    },
    // 导航栏渐变
    pageScroll(e) {
      let color = this.globPrimaryColor
      let tmpY = 320
      if (e.scrollTop > tmpY) {
        this.opacity = 1
      } else {
        this.opacity = (e.scrollTop - 260) / 60
      }
      let rgba = this.$u.colorToRgba(color, this.opacity)
      this.backgroundColor = { backgroundColor: rgba }
    },
    // 返回上一页
    onBack() {
      let pages = getCurrentPages()
      let page = pages[pages.length - 2]
      if (this.$u.test.empty(page)) {
        this.$u.route({
          type: 'reLaunch',
          url: 'pageFound/mall/list',
        })
      } else {
        this.$u.route({ type: 'back' })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.status-bar-placeholder {
  width: 100%;
  background: #ffffff;
}
.navbar-title {
  position: absolute;
  /* #ifdef H5 */
  left: 125px;
  /* #endif */
  right: 125px;
  font-size: 16px;
  text-align: center;
  font-weight: 500;
  color: #ffffff;
}
.navbar-wrapper {
  /deep/.u-navbar-inner {
    padding: 0 30rpx;
  }
  .right {
    display: flex;
  }
  &.active {
    .round {
      background: rgba(0, 0, 0, 0.4);
    }
  }
  .round {
    width: 58rpx;
    height: 58rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }
}

.product-name {
  padding: 32rpx 30rpx 0;
  background: #ffffff;
  .name {
    font-size: 32rpx;
    font-weight: 500;
    color: $edu-main-color;
    line-height: 48rpx;
    letter-spacing: 1px;
  }
}
.product-price {
  padding: 24rpx 30rpx 32rpx;
  background: #ffffff;
  .price-wrap {
    display: flex;
    align-items: baseline;
    .stock {
      font-size: 24rpx;
      font-weight: 400;
      color: $edu-tips-color;
    }
    .line {
      width: 1rpx;
      height: 16rpx;
      margin: 0 16rpx;
      background-color: #e4e7ed;
    }
    .right {
      display: flex;
      align-items: baseline;
      margin-left: auto;
    }
    .integral {
      font-size: 36rpx;
      font-weight: 600;
      color: $edu-price-color;
    }
    .price {
      font-size: 36rpx;
      font-weight: 600;
      color: $edu-price-color;
    }
    .free {
      font-size: 36rpx;
      color: $edu-free-color;
    }
    .discount {
      font-size: 26rpx;
      font-weight: 600;
      color: $edu-price-color;
    }
    .market-price {
      font-size: 24rpx;
      font-weight: 400;
      color: $edu-tips-color;
      text-decoration: line-through;
    }
  }
}

.product-graphic {
  margin-top: 8rpx;
  background: #ffffff;
  .title {
    padding: 32rpx 0;
    font-size: 30rpx;
    font-weight: 400;
    color: $edu-content-color;
  }
  .line {
    margin-right: 24rpx;
    width: 6rpx;
    height: 40rpx;
    background: linear-gradient(90deg, #ff3b2f 0%, #ff8a52 100%);
  }
  .content {
    padding: 24rpx 30rpx;
  }
}

.product-cart {
  .cart-placeholder {
    width: 100%;
    height: 98rpx;
    box-sizing: content-box;
  }
  .cart-wrap {
    padding-left: 55rpx;
    padding-right: 55rpx;
    padding-top: 13rpx;
    padding-bottom: 13rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 13rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 13rpx);
    display: flex;
    background: #ffffff;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    box-sizing: content-box;
    .btn {
      width: 100%;
      height: 72rpx;
      font-size: 32rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 72rpx;
      background: linear-gradient(90deg, #ff3b2f 0%, #ff8a52 100%);
      border-radius: 36rpx;
    }
  }
}
</style>
